<template>
  <view class="container">
    <view class="linner">
      <view class="tabs">
        <view class="tab-item" @click="setIndex(index)" :class="currentIndex == index?'active':''"
          v-for="(item, index) in tabsList" :key="index">
          {{item.label}}
        </view>
      </view>
      <view class="zidingyi">
        <view class="zidingyi-title">
          自定义时间
        </view>
        <view class="time-range">
          <view class="time-range-item" @click="openTime('start')">
            {{params.startTime }}
          </view>
          至
          <view class="time-range-item" @click="openTime('end')">
            {{params.endTime}}
          </view>
        </view>
      </view>
      <view class="block mbom30">
        <view class="block-title">
          数据概括
        </view>
        <view class="block-content">
          <view class="block-content-linner">
            <view class="item">
              <view class="item-value">
                0.00
              </view>
              <view class="item-label">
                交易总金额(元)
              </view>
            </view>
            <view class="item">
              <view class="item-value">
                0
              </view>
              <view class="item-label">
                交易笔数
              </view>
            </view>
            <view class="item">
              <view class="item-value">
                0.00
              </view>
              <view class="item-label">
                退款金额(元)
              </view>
            </view>
          </view>
          <view class="block-content-linner">
            <view class="item">
              <view class="item-value">
                0.00
              </view>
              <view class="item-label">
                总顾客(人)
              </view>
            </view>
            <view class="item">
              <view class="item-value">
                0
              </view>
              <view class="item-label">
                新客(人)
              </view>
            </view>
            <view class="item">
              <view class="item-value">
                0.00
              </view>
              <view class="item-label">
                回头客(人)
              </view>
            </view>
          </view>
        </view>
        <view class="charts-box">
          <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
        </view>
      </view>
      <view class="block mbom30">
        <view class="block-title">
          结算明细
        </view>
        <view class="block-lines">
          <view class="block-line mbom30">
            <view class="block-line-item" style="width: 30%;">
              <view class="value" style="color: red;">
                0.00
              </view>
              <view class="label">
                收款金额(元)
              </view>
            </view>
            <view class="block-line-item">
              =
            </view>
            <view class="block-line-item">
              <view class="value">
                0
              </view>
              <view class="label">
                交易笔数
              </view>
            </view>
            <view class="block-line-item">
              -
            </view>
            <view class="block-line-item" style="width: 30%;">
              <view class="value">
                0.00
              </view>
              <view class="label">
                退款金额(元)
              </view>
            </view>
          </view>
          <view class="block-line mbom30">
            <view class="block-line-item" style="width: 30%;">
              <view class="value" style="color: red;">
                0.00
              </view>
              <view class="label">
                应结算金额(元)
              </view>
            </view>
            <view class="block-line-item">
              =
            </view>
            <view class="block-line-item">
              <view class="value">
                0
              </view>
              <view class="label">
                收款金额(元)
              </view>
            </view>
            <view class="block-line-item">
              -
            </view>
            <view class="block-line-item" style="width: 30%;">
              <view class="value">
                0.00
              </view>
              <view class="label">
                交易手续费(元)
              </view>
            </view>
          </view>
          <view class="block-line" style="justify-content: center;">
            <view class="block-line-item">
              -
            </view>
            <view class="block-line-item" style="width: 30%;">
              <view class="value">
                0.00
              </view>
              <view class="label">
                折扣优惠(元)
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="block">
        <view class="block-title">
          下单频次
        </view>
        <view class="block-statistics">
          <view class="block-statistics-item">
            <view class="label">
              1次
            </view>
            <view class="value">
              0人
            </view>
          </view>
          <view class="block-statistics-item">
            <view class="label">
              2-3次
            </view>
            <view class="value">
              0人
            </view>
          </view>
          <view class="block-statistics-item">
            <view class="label">
              3次以上
            </view>
            <view class="value">
              0人
            </view>
          </view>
        </view>
      </view>
    </view>
    <uv-datetime-picker ref="datetimePicker" v-model="value" mode="date" @confirm="confirm">
    </uv-datetime-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabsList: [{
            label: "今日"
          },
          {
            label: "昨日"
          },
          {
            label: "近7天"
          },
          {
            label: "近30天"
          }
        ],
        params: {
          startTime: "",
          endTime: ""
        },
        currentIndex: 0,
        chartData: {},
        opts: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [15, 10, 0, 15],
          dataLabel: false,
          dataPointShape: false,
          enableScroll: false,
          legend: {},
          xAxis: {
            disableGrid: true
          },
          yAxis: {
            gridType: "dash",
            dashLength: 2,
            data: [{
              min: 0,
              max: 150
            }]
          },
          extra: {
            line: {
              type: "curve",
              width: 2,
              activeType: "hollow",
              linearType: "custom"
            }
          }
        }
      }
    },
    onReady() {
      this.getServerData();
    },
    onLoad() {
      this.getTime();
    },
    methods: {
      setIndex(index) {
        this.currentIndex = index;
        this.getTime();
      },
      open() {
        this.$refs.popup.open();
      },
      getServerData() {
        //模拟从服务器获取数据时的延时
        setTimeout(() => {
          //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
          let res = {
            categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
            series: [{
                name: "成交量A",
                linearColor: [
                  [
                    0,
                    "#1890FF"
                  ],
                  [
                    0.25,
                    "#00B5FF"
                  ],
                  [
                    0.5,
                    "#00D1ED"
                  ],
                  [
                    0.75,
                    "#00E6BB"
                  ],
                  [
                    1,
                    "#90F489"
                  ]
                ],
                data: [15, 45, 15, 45, 15, 45]
              },
              {
                name: "成交量B",
                linearColor: [
                  [
                    0,
                    "#91CB74"
                  ],
                  [
                    0.25,
                    "#2BDCA8"
                  ],
                  [
                    0.5,
                    "#2AE3A0"
                  ],
                  [
                    0.75,
                    "#C4D06E"
                  ],
                  [
                    1,
                    "#F2D375"
                  ]
                ],
                data: [55, 85, 55, 85, 55, 85]
              },
              {
                name: "成交量C",
                linearColor: [
                  [
                    0,
                    "#FAC858"
                  ],
                  [
                    0.33,
                    "#FFC371"
                  ],
                  [
                    0.66,
                    "#FFC2B2"
                  ],
                  [
                    1,
                    "#FA7D8D"
                  ]
                ],
                data: [95, 125, 95, 125, 95, 125]
              }
            ]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }, 500);
      },
      openTime(type) {
        console.log("type", type);
        this.openType = type;
        this.$refs.datetimePicker.open();
      },
      confirm(e) {
        console.log('confirm', e);
        if (this.openType == "start") {
          this.params.startTime = uni.$uv.timeFormat(e.value, "yyyy-mm-dd");
          console.log('startTime', this.params.startTime);
        }
        if (this.openType == "end") {
          this.params.endTime = uni.$uv.timeFormat(e.value, "yyyy-mm-dd");
          console.log('endTime', this.params.endTime);
        }
      
      },
      getTime() {
        switch (this.currentIndex) {
          case 0:
            this.getTodayRange()
            break;
          case 1:
            this.getTomorrowRange()
            break;
          case 2:
            this.getLast7DaysRange()
            break;
          default:
            this.getLast30DaysRange()
            break;
        }
      },
      formatDate(date) {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
        const day = date.getDate().toString().padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
      
      getTodayRange() {
        const today = new Date();
        today.setHours(0, 0, 0, 0); // 设置时间为今天的开始
        const tomorrow = new Date(today);
        tomorrow.setDate(today.getDate() + 1); // 设置时间为明天的开始
        // return { start: this.formatDate(today), end: this.formatDate(tomorrow) };
        this.params.startTime = this.formatDate(today);
        this.params.endTime = this.formatDate(tomorrow);
      },
      
      getTomorrowRange() {
        const today = new Date();
        const tomorrow = new Date(today);
        tomorrow.setDate(today.getDate() + 1); // 设置时间为明天的开始
        const dayAfterTomorrow = new Date(tomorrow);
        dayAfterTomorrow.setDate(tomorrow.getDate() + 1); // 设置时间为后天天的开始
        // return { start: this.formatDate(tomorrow), end: this.formatDate(dayAfterTomorrow) };
        this.params.startTime = this.formatDate(tomorrow);
        this.params.endTime = this.formatDate(dayAfterTomorrow);
      },
      
      getLast7DaysRange() {
        const today = new Date();
        const sevenDaysAgo = new Date(today);
        sevenDaysAgo.setDate(today.getDate() - 6); // 设置时间为7天前的开始
        const tomorrow = new Date(today);
        tomorrow.setDate(today.getDate() + 1); // 设置时间为明天的开始
        // return { start: this.formatDate(sevenDaysAgo), end: this.formatDate(tomorrow) };
        this.params.startTime = this.formatDate(sevenDaysAgo);
        this.params.endTime = this.formatDate(tomorrow);
      },
      
      getLast30DaysRange() {
        const today = new Date();
        const thirtyDaysAgo = new Date(today);
        thirtyDaysAgo.setDate(today.getDate() - 29); // 设置时间为30天前的开始
        const tomorrow = new Date(today);
        tomorrow.setDate(today.getDate() + 1); // 设置时间为明天的开始
        // return { start: this.formatDate(thirtyDaysAgo), end: this.formatDate(tomorrow) };
        this.params.startTime = this.formatDate(thirtyDaysAgo);
        this.params.endTime = this.formatDate(tomorrow);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .zidingyi {
    .zidingyi-title {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }

    .time-range {
      display: flex;
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      align-items: center;
      margin: 30rpx 0;

      .time-range-item {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        width: 330rpx;
        height: 84rpx;
        background: #fff;
        text-align: center;
        line-height: 84rpx;
        border-radius: 30rpx;
      }
    }
  }

  .active {
    background: #EA7222 !important;
    color: #fff !important;
  }

  .container {
    padding: 30rpx;
    box-sizing: border-box;

    .linner {
      .tabs {
        display: flex;
        margin-bottom: 30rpx;

        .tab-item {
          width: 120rpx;
          height: 50rpx;
          background: #FFFFFF;
          border-radius: 12rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
          text-align: center;
          line-height: 50rpx;
          margin-right: 20rpx;
        }

        .tab-item:last-child {
          margin-right: 0 !important;
        }
      }

      .block {
        padding: 30rpx;
        box-sizing: border-box;
        background: #fff;
        border-radius: 30rpx;

        .block-title {
          font-weight: bold;
          font-size: 28rpx;
          color: #333333;
        }

        .block-statistics {
          .block-statistics-item {
            display: flex;
            align-items: center;
            margin-top: 30rpx;

            .label {
              font-weight: bold;
              font-size: 28rpx;
              color: #333333;
              width: 120rpx;
              text-align: right;
              margin-right: 30rpx;
            }

            .value {
              font-weight: 400;
              font-size: 28rpx;
              color: #666666;
            }
          }
        }

        .block-lines {
          padding: 30rpx 48rpx;
          box-sizing: border-box;

          .block-line {
            display: flex;
            justify-content: space-between;

            .block-line-item {
              font-weight: bold;
              font-size: 36rpx;
              color: #333333;
              display: flex;
              flex-direction: column;
              align-items: center;

              .value {
                font-weight: bold;
                font-size: 36rpx;
                color: #333333;
              }

              .label {
                font-weight: 400;
                font-size: 20rpx;
                color: #666666;
              }
            }
          }
        }

        .block-content {
          padding: 0 30rpx;
          box-sizing: border-box;

          .block-content-linner {
            display: flex;
            justify-content: space-between;
            margin-top: 30rpx;

            .item {
              display: flex;
              flex-direction: column;
              align-items: center;
              flex: 1;

              .item-value {
                font-weight: bold;
                font-size: 36rpx;
                color: #EA7222;
              }

              .item-label {
                font-weight: 400;
                font-size: 20rpx;
                color: #666666;
              }
            }
          }
        }
      }
    }
  }
</style>